import React from 'react';
import { Table } from 'antd';
import style from '@/css/Tom/order_table.less';

function change(e: any) {
  console.log(e);
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'name',
    key: 'name',
    height: '10px',
    render(text: any, row: any, index: any) {
      console.group('展示');
      console.log(text, row, index);
      console.groupEnd();
      const { order_number, time, name, address } = row;
      const obj = {
        children: (
          <div className={style.table}>
            <div>
              订单号: <span className={style.order_num}>{order_number} </span>
              <span className={style.time}>{time}</span>
              微信支付{' '}
              <span className={style.change} onClick={() => change(row)}>
                更换
              </span>
              团长&nbsp;&nbsp;&nbsp;姓名&nbsp;&nbsp;{name}
              小区: <span className={style.address}> {address}</span>
            </div>
          </div>
        ),
        props: { colSpan: 6 },
        align: 'center',
      };
      return obj;
    },
  },
  { title: '商家信息', dataIndex: '', key: '', align: 'center' }, //商家信息
  { title: '买家信息', dataIndex: '', key: '', align: 'center' }, //买家信息
  { title: '送货方式', dataIndex: '', key: '', align: 'center' },
  { title: '支付金额', dataIndex: '', key: '', align: 'center' },
  { title: '状态', dataIndex: '', key: '', align: 'center' },
];
const columnTwo = [
  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center' },
  { title: 'Age', dataIndex: 'age', key: 'age', align: 'center' },
  { title: 'Address', dataIndex: 'address', key: 'address', align: 'center' },
];

function Tables(props: any) {
  const { data, type } = props;
  console.log('传递过来的是', props.data);
  const datas = [
    {
      key: 1,
      name: 'John Brown',
      order_number: 1212231231232123,
      time: '2021-03-30 10:57:31',
      address: 'Lake ParkLake ParkLake ParkLake ParkLake ParkLake Park',
    },
    {
      key: 2,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      description:
        'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
    {
      key: 3,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      description:
        'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
    {
      key: 4,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      description:
        'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
  ];
  const dataTwo = [
    {
      key: 1,
      name: '张三',
      age: 32,
      address: 'New York No. 1 Lake Park',
      description:
        'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    },
    {
      key: 2,
      name: '李四',
      age: 42,
      address: 'London No. 1 Lake Park',
      description:
        'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
  ];
  const dataThree = [
    {
      ID: 1,
      bus: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '杨莉',
        address: '上海市奉贤区海湾镇',
      },
      buyer: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '张三',
        address: '上海市奉贤区海湾镇',
      },
      delivery: '顺丰快读',
      pay: {
        //配送delivery_price
        sum_price: 100.01,
        delivery_price: 5.02,
        order_price: 105.03,
        discount_price: 10.02,
        authentic: 95.01,
      },
      static: 1,
    },
    {
      ID: 2,
      bus: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '杨莉',
        address: '上海市奉贤区海湾镇',
      },
      buyer: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '张三',
        address: '上海市奉贤区海湾镇',
      },
      delivery: '顺丰快读',
      pay: {
        //配送delivery_price
        sum_price: 100.01,
        delivery_price: 5.02,
        order_price: 105.03,
        discount_price: 10.02,
        authentic: 95.01,
      },
      static: 2,
    },
    {
      ID: 3,
      bus: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '杨莉',
        address: '上海市奉贤区海湾镇',
      },
      buyer: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '张三',
        address: '上海市奉贤区海湾镇',
      },
      delivery: '顺丰快读',
      pay: {
        //配送delivery_price
        sum_price: 100.01,
        delivery_price: 5.02,
        order_price: 105.03,
        discount_price: 10.02,
        authentic: 95.01,
      },
      static: 3,
    },
    {
      ID: 4,
      bus: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '杨莉',
        address: '上海市奉贤区海湾镇',
      },
      buyer: {
        phone: '13234948394',
        niceName: '程序超市',
        name: '张三',
        address: '上海市奉贤区海湾镇',
      },
      delivery: '顺丰快读',
      pay: {
        //配送delivery_price
        sum_price: 100.01,
        delivery_price: 5.02,
        order_price: 105.03,
        discount_price: 10.02,
        authentic: 95.01,
      },
      static: 4,
    },
  ];
  const columnThree = [
    { title: 'ID', dataIndex: 'ID', key: '1' },
    {
      title: '商家信息',
      dataIndex: 'bus',
      key: '2',
      render(text: any, row: any, index: any) {
        console.log('啊看一下', row.bus);
        const { address, name, niceName, phone } = row.bus;
        return (
          <div
            className={style.details}
            style={{ textAlign: 'left', paddingLeft: '1em' }}
          >
            <span>昵称：{address}</span>
            <br />
            <span>姓名：{name}</span>
            <br />
            <span>电话：{niceName}</span>
            <br />
            <span>地址：{phone}</span>
          </div>
        );
      },
    }, //商家信息
    {
      title: '买家信息',
      dataIndex: 'buyer',
      key: '3',
      render(text: any, row: any, index: any) {
        console.log('啊看一下', row);
        const { address, name, niceName, phone } = row.buyer;
        return (
          <div className={style.details} style={{ textAlign: 'left' }}>
            <span>昵称：{address}</span>
            <br />
            <span>姓名：{name}</span>
            <br />
            <span>电话：{niceName}</span>
            <br />
            <span>地址：{phone}</span>
          </div>
        );
      },
    }, //买家信息
    { title: '送货方式', dataIndex: 'delivery', key: '4' },
    {
      title: '支付金额',
      dataIndex: 'pay',
      key: '5',
      render(text: any, row: any, index: any) {
        // console.log('啊看一下', row.pay);
        const {
          authentic,
          delivery_price,
          discount_price,
          order_price,
          sum_price,
        } = row.pay;
        return (
          <div className={style.details} style={{ textAlign: 'left' }}>
            <span>商品总价：{authentic}</span>
            <br />
            <span>配送费用：{delivery_price}</span>
            <br />
            <span>订单总价：{discount_price}</span>
            <br />
            <span>总优惠：&nbsp;&nbsp;&nbsp;{order_price}</span>
            <br />
            <span>实付金额：{sum_price}</span>
          </div>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'static',
      key: '6',
      render(text: any, row: any, index: any) {
        console.log('状态展示', text);
        switch (text) {
          case 1:
            return (
              <div
                style={{
                  width: '5em',
                  color: 'white',
                  background: '#999999',
                  textAlign: 'center',
                }}
              >
                已发货
              </div>
            );
            break;
          case 2:
            return (
              <div
                style={{
                  width: '5em',
                  color: 'white',
                  background: '#F1A23C',
                  textAlign: 'center',
                }}
              >
                代发货
              </div>
            );
            break;
          case 3:
            return (
              <div
                style={{
                  width: '5em',
                  color: 'white',
                  background: '#409EFF',
                  textAlign: 'center',
                }}
              >
                已取消
              </div>
            );
            break;
          case 4:
            return (
              <div
                style={{
                  width: '5em',
                  color: 'white',
                  background: '#409EFF',
                  textAlign: 'center',
                }}
              >
                已关闭
              </div>
            );
            break;
        }
      },
    },
  ];

  return (
    <div>
      {data.key === '1' ? (
        <Table
          columns={columns}
          x={true}
          expandable={{
            expandedRowRender: (record) => {
              const id = record.order_number;
              //console.log('展示一下吧', id);
              return (
                <Table
                  x={true}
                  pagination={false}
                  showHeader={false}
                  columns={columnThree}
                  dataSource={dataThree}
                />
              );
            },
            rowExpandable: (record) => record.name !== 'Not Expandable',
          }}
          dataSource={datas}
        />
      ) : (
        <Table
          columns={columnTwo}
          expandable={{
            expandedRowRender: (record) => (
              <p style={{ margin: 0 }}>{record.description}</p>
            ),
            rowExpandable: (record) => record.name !== 'Not Expandable',
          }}
          dataSource={dataTwo}
        />
      )}
    </div>
  );
}

export default Tables;
